<template>
 <div class="nav-header bg-white shadow-xs border-0">
       <!--手机版顶部图标显示-->
        <div class="nav-top">
            <!--文字logo-->
            <!-- <a href="index.html"><i class="feather-zap text-success display1-size me-2 ms-0"></i><span class="d-inline-block fredoka-font ls-3 fw-600 text-current font-xxl logo-text mb-0">Sociala. </span> </a> -->
            <el-link to="/">
              <i class="feather-zap text-success display1-size me-2 ms-0"></i><span class="d-inline-block fredoka-font ls-3 fw-600 text-current font-xxl logo-text mb-0">Yubao. </span>
            </el-link>
            <!--信息-->
            <a href="#" class="mob-menu ms-auto me-2 chat-active-btn"><i class="feather-message-circle text-grey-900 font-sm btn-round-md bg-greylight"></i></a>
            <!-- <a href="default-video.html" class="mob-menu me-2"><i class="feather-video text-grey-900 font-sm btn-round-md bg-greylight"></i></a> -->
           <!--视频-->
            <el-link to="/Svideo" class="mob-menu me-2">
              <i class="feather-video text-grey-900 font-sm btn-round-md bg-greylight"></i>
            </el-link>
            <!--搜索框-->
            <a href="#" class="me-2 menu-search-icon mob-menu"><i class="feather-search text-grey-900 font-sm btn-round-md bg-greylight"></i></a>
           <!--收缩展开菜单按钮-->
            <!-- <button class="nav-menu me-0 ms-2" title="打开导航菜单"></button> -->
            <button id="btnopen" type="button" class="nav-menu me-0 ms-2" title="打开导航菜单" @click="toggleMenu"><!-- 按钮内容在这里 --></button>

            <!-- <el-button  class="nav-menu me-0 ms-2" type="primary" icon="el-icon-edit" circle></el-button> -->
        </div>
<!--搜索框-->
<!--   <form action="#" class="float-left header-search">-->
<!--     <div class="form-group mb-0 icon-input">-->
<!--       <el-input-->
<!--         placeholder="Start typing to search.."-->
<!--         v-model="searchInput"-->
<!--         class="bg-grey border-0 lh-32 pt-2 pb-2 ps-5 pe-3 font-xssss fw-500 rounded-xl theme-dark-bg"-->
<!--         style="width: 350px;"-->
<!--       >-->
<!--         <template #append>-->
<!--           <el-button icon="el-icon-search" class="search-icon-btn"></el-button>-->
<!--         </template>-->
<!--       </el-input>-->
<!--     </div>-->
<!--   </form>-->
        <form action="#" class="float-left header-search">
            <div class="form-group mb-0 icon-input">
                <i class="feather-search font-sm text-grey-400"></i>
                <input type="text" placeholder="Start typing to search.." class="bg-grey border-0 lh-32 pt-2 pb-2 ps-5 pe-3 font-xssss fw-500 rounded-xl w350 theme-dark-bg">
            </div>
        </form>
        <!-- <a href="default.html" class="p-2 text-center ms-3 menu-icon center-menu-icon"><i class="feather-home font-lg alert-primary btn-round-lg theme-dark-bg text-current "></i></a> -->
<!--PC端导航栏-->
   <div id="topnva1">
     <!-- 首页 -->
     <el-link @click="changeTab('home')" :class="{'active-tab': activeTab === 'home'}" class="p-2 text-center ms-0 menu-icon center-menu-icon">
       <i id="s1" :class="{'text-current': activeTab === 'home', 'text-grey-500': activeTab !== 'home',
       'alert-primary': activeTab === 'home', 'bg-greylight': activeTab !== 'home'}"
          class="feather-home font-lg  btn-round-lg theme-dark-bg"></i>
     </el-link>

     <!-- 故事 -->
     <el-link @click="changeTab('story')" :class="{'active-tab': activeTab === 'story'}" class="p-2 text-center ms-0 menu-icon center-menu-icon">
       <i id="s2" :class="{'text-current': activeTab === 'story', 'text-grey-500': activeTab !== 'story','alert-primary': activeTab === 'story', 'bg-greylight': activeTab !== 'story'}" class="feather-zap font-lg  btn-round-lg theme-dark-bg"></i>
     </el-link>

     <!-- 视频 -->
     <el-link @click="changeTab('video')" :class="{'active-tab': activeTab === 'video'}" class="p-2 text-center ms-0 menu-icon center-menu-icon">
       <i id="s3" :class="{'text-current': activeTab === 'video', 'text-grey-500': activeTab !== 'video','alert-primary': activeTab === 'video', 'bg-greylight': activeTab !== 'video'}" class="feather-video font-lg  btn-round-lg theme-dark-bg"></i>
     </el-link>

     <!-- 分组 -->
     <el-link @click="changeTab('group')" :class="{'active-tab': activeTab === 'group'}" class="p-2 text-center ms-0 menu-icon center-menu-icon">
       <i id="s4" :class="{'text-current': activeTab === 'group', 'text-grey-500': activeTab !== 'group','alert-primary': activeTab === 'group', 'bg-greylight': activeTab !== 'group'}" class="feather-user font-lg  btn-round-lg theme-dark-bg"></i>
     </el-link>

     <!-- 购物 -->
     <el-link @click="changeTab('shopping')" :class="{'active-tab': activeTab === 'shopping'}" class="p-2 text-center ms-0 menu-icon center-menu-icon">
       <i id="s5" :class="{'text-current': activeTab === 'shopping', 'text-grey-500': activeTab !== 'shopping','alert-primary': activeTab === 'shopping', 'bg-greylight': activeTab !== 'shopping'}" class="feather-shopping-bag font-lg  btn-round-lg theme-dark-bg"></i>
     </el-link>
   </div>
<!--    <div id="topnva1">-->
<!--    &lt;!&ndash; 首页 &ndash;&gt;-->
<!--    <el-link to="/" class="p-2 text-center ms-0 menu-icon center-menu-icon">-->
<!--      <i id="s1" class="feather-home font-lg alert-primary btn-round-lg theme-dark-bg text-current "></i>-->
<!--    </el-link>-->

<!--    &lt;!&ndash; 故事 &ndash;&gt;-->
<!--    <el-link to="/Storie" class="p-2 text-center ms-0 menu-icon center-menu-icon">-->
<!--      <i id="s2" class="feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 "></i>-->
<!--    </el-link>-->

<!--    &lt;!&ndash; 视频 &ndash;&gt;-->
<!--    <el-link to="/Svideo" class="p-2 text-center ms-0 menu-icon center-menu-icon">-->
<!--      <i id="s3" class="feather-video font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 "></i>-->
<!--    </el-link>-->

<!--    &lt;!&ndash; 分组 &ndash;&gt;-->
<!--    <el-link to="/Sgroup" class="p-2 text-center ms-0 menu-icon center-menu-icon">-->
<!--      <i id="s4" class="feather-user font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 "></i>-->
<!--    </el-link>-->

<!--    &lt;!&ndash; 购物 &ndash;&gt;-->
<!--    <el-link to="/Shopping" class="p-2 text-center ms-0 menu-icon center-menu-icon">-->
<!--      <i id="s5" class="feather-shopping-bag font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 "></i>-->
<!--    </el-link>-->
<!--  </div>-->
        <!--消息图标-->
        <!-- <a href="#" class="p-2 text-center ms-auto menu-icon" id="dropdownMenu3" data-bs-toggle="dropdown" aria-expanded="false"><span class="dot-count bg-warning"></span><i class="feather-bell font-xl text-current"></i></a> -->
        <div class="p-2 text-center ms-auto menu-icon"><el-button type="success" icon="el-icon-bell" circle
          @click="open1"
          ></el-button></div>
        <div class="dropdown-menu dropdown-menu-end p-4 rounded-3 border-0 shadow-lg" aria-labelledby="dropdownMenu3">

            <h4 class="fw-700 font-xss mb-4">Notification</h4>
            <div class="card bg-transparent-card w-100 border-0 ps-5 mb-3">
                <img src="/images/user-8.png" alt="user" class="w40 position-absolute left-0">
                <h5 class="font-xsss text-grey-900 mb-1 mt-0 fw-700 d-block">Hendrix Stamp <span class="text-grey-400 font-xsssss fw-600 float-right mt-1"> 3 min</span></h5>
                <h6 class="text-grey-500 fw-500 font-xssss lh-4">There are many variations of pass..</h6>
            </div>
            <div class="card bg-transparent-card w-100 border-0 ps-5 mb-3">
                <img src="/images/user-4.png" alt="user" class="w40 position-absolute left-0">
                <h5 class="font-xsss text-grey-900 mb-1 mt-0 fw-700 d-block">Goria Coast <span class="text-grey-400 font-xsssss fw-600 float-right mt-1"> 2 min</span></h5>
                <h6 class="text-grey-500 fw-500 font-xssss lh-4">Mobile Apps UI Designer is require..</h6>
            </div>

            <div class="card bg-transparent-card w-100 border-0 ps-5 mb-3">
                <img src="/images/user-7.png" alt="user" class="w40 position-absolute left-0">
                <h5 class="font-xsss text-grey-900 mb-1 mt-0 fw-700 d-block">Surfiya Zakir <span class="text-grey-400 font-xsssss fw-600 float-right mt-1"> 1 min</span></h5>
                <h6 class="text-grey-500 fw-500 font-xssss lh-4">Mobile Apps UI Designer is require..</h6>
            </div>
            <div class="card bg-transparent-card w-100 border-0 ps-5">
                <img src="/images/user-6.png" alt="user" class="w40 position-absolute left-0">
                <h5 class="font-xsss text-grey-900 mb-1 mt-0 fw-700 d-block">Victor Exrixon <span class="text-grey-400 font-xsssss fw-600 float-right mt-1"> 30 sec</span></h5>
                <h6 class="text-grey-500 fw-500 font-xssss lh-4">Mobile Apps UI Designer is require..</h6>
            </div>
        </div>
        <!--聊天窗口-->
        <a href="#" class="p-2 text-center ms-3 menu-icon chat-active-btn"><i class="feather-message-square font-xl text-current"></i></a>
        <!--主题选择设置-->
        <div class="p-2 text-center ms-3 position-relative dropdown-menu-icon menu-icon cursor-pointer">
            <i class="feather-settings animation-spin d-inline-block font-xl text-current"></i>
            <div class="dropdown-menu-settings switchcolor-wrap">
                <h4 class="fw-700 font-sm mb-4">Settings</h4>
<!--                <h6 class="font-xssss text-grey-500 fw-700 mb-3 d-block">Choose Color Theme</h6>-->
<!--                <ul>-->
<!--                    <li>-->
<!--                        <label class="item-radio item-content">-->
<!--                            <input type="radio" name="color-radio" value="red" checked=""><i class="ti-check"></i>-->
<!--                            <span class="circle-color bg-red" style="background-color: #ff3b30;"></span>-->
<!--                        </label>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <label class="item-radio item-content">-->
<!--                            <input type="radio" name="color-radio" value="green"><i class="ti-check"></i>-->
<!--                            <span class="circle-color bg-green" style="background-color: #4cd964;"></span>-->
<!--                        </label>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <label class="item-radio item-content">-->
<!--                            <input type="radio" name="color-radio" value="blue" checked=""><i class="ti-check"></i>-->
<!--                            <span class="circle-color bg-blue" style="background-color: #132977;"></span>-->
<!--                        </label>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <label class="item-radio item-content">-->
<!--                            <input type="radio" name="color-radio" value="pink"><i class="ti-check"></i>-->
<!--                            <span class="circle-color bg-pink" style="background-color: #ff2d55;"></span>-->
<!--                        </label>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <label class="item-radio item-content">-->
<!--                            <input type="radio" name="color-radio" value="yellow"><i class="ti-check"></i>-->
<!--                            <span class="circle-color bg-yellow" style="background-color: #ffcc00;"></span>-->
<!--                        </label>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <label class="item-radio item-content">-->
<!--                            <input type="radio" name="color-radio" value="orange"><i class="ti-check"></i>-->
<!--                            <span class="circle-color bg-orange" style="background-color: #ff9500;"></span>-->
<!--                        </label>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <label class="item-radio item-content">-->
<!--                            <input type="radio" name="color-radio" value="gray"><i class="ti-check"></i>-->
<!--                            <span class="circle-color bg-gray" style="background-color: #8e8e93;"></span>-->
<!--                        </label>-->
<!--                    </li>-->

<!--                    <li>-->
<!--                        <label class="item-radio item-content">-->
<!--                            <input type="radio" name="color-radio" value="brown"><i class="ti-check"></i>-->
<!--                            <span class="circle-color bg-brown" style="background-color: #D2691E;"></span>-->
<!--                        </label>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <label class="item-radio item-content">-->
<!--                            <input type="radio" name="color-radio" value="darkgreen"><i class="ti-check"></i>-->
<!--                            <span class="circle-color bg-darkgreen" style="background-color: #228B22;"></span>-->
<!--                        </label>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <label class="item-radio item-content">-->
<!--                            <input type="radio" name="color-radio" value="deeppink"><i class="ti-check"></i>-->
<!--                            <span class="circle-color bg-deeppink" style="background-color: #FFC0CB;"></span>-->
<!--                        </label>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <label class="item-radio item-content">-->
<!--                            <input type="radio" name="color-radio" value="cadetblue"><i class="ti-check"></i>-->
<!--                            <span class="circle-color bg-cadetblue" style="background-color: #5f9ea0;"></span>-->
<!--                        </label>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <label class="item-radio item-content">-->
<!--                            <input type="radio" name="color-radio" value="darkorchid"><i class="ti-check"></i>-->
<!--                            <span class="circle-color bg-darkorchid" style="background-color: #9932cc;"></span>-->
<!--                        </label>-->
<!--                    </li>-->
<!--                </ul>-->

                <div class="card bg-transparent-card border-0 d-block mt-3">
                    <h4 class="d-inline font-xssss mont-font fw-700">Header Background</h4>
                    <div class="d-inline float-right mt-1">
                        <label class="toggle toggle-menu-color"><input type="checkbox"><span class="toggle-icon"></span></label>
                    </div>
                </div>
                <div class="card bg-transparent-card border-0 d-block mt-3">
                    <h4 class="d-inline font-xssss mont-font fw-700">Menu Position</h4>
                    <div class="d-inline float-right mt-1">
                        <label class="toggle toggle-menu"><input type="checkbox"><span class="toggle-icon"></span></label>
                    </div>
                </div>
                <div class="card bg-transparent-card border-0 d-block mt-3">
                    <h4 class="d-inline font-xssss mont-font fw-700">Dark Mode</h4>
                    <div class="d-inline float-right mt-1">
                        <label class="toggle toggle-dark"><input type="checkbox"><span class="toggle-icon"></span></label>
                    </div>
                </div>

            </div>
        </div>

        <!--用户设置-->
        <a href="default-settings.html" class="p-0 ms-3 menu-icon"><img src="/images/profile-4.png" alt="user" class="w40 mt--1"></a>

    </div>
</template>

  <script>
  import { Notification } from 'element-ui';

  export default {
    components: {},
    data() {
      return {
        searchInput: '',
        activeTab: 'home' // 默认选中首页
      };
    },

    mounted() {
      $('.nav-menu').on('click', function () {
        //alert("点歌锤子！！1");
        $(this).toggleClass('active');
        $('.navigation').toggleClass('nav-active');

    });

    $('.close-nav').on('click', function () {
        $('.navigation').removeClass('nav-active');
        return false;
    });


    $('.toggle-menu-color input').on('change', function () {
        if (this.checked) {
            $('.navigation').addClass('menu-current-color');
        } else {
            $('.navigation').removeClass('menu-current-color');
        }
    });

    $('.toggle-menu input').on('change', function () {
        if (this.checked) {
            $('.navigation,.main-content').addClass('menu-active');
        } else {
            $('.navigation,.main-content').removeClass('menu-active');
        }
    });
    // 在组件挂载后打印当前路径到控制台
    //console.log("路由路径为:"+ this.$route.path);
    const TopPath=this.$route.path;

    switch (TopPath) {
        case '/':
          console.log('路由路径为: /');
          break;
        case '/Storie':
          // 获取包含 id="s1" 的 <i> 标签的元素
          const iconElement1 = document.getElementById('s1');
          // 获取 <i> 标签的 class 属性值
          let iconClass1 = iconElement1.className;
          // 将 alert-primary 替换为 text-grey-500
          iconClass1 = iconClass1.replace(/\balert-primary\b/g, 'bg-greylight');
          // 将 text-current 替换为 text-grey-500
          iconClass1 = iconClass1.replace(/\btext-current\b/g, 'text-grey-500');
          // 更新 <i> 标签的 class 属性值
          iconElement1.className = iconClass1;

          // 获取包含 id="s2" 的 <i> 标签的元素
          const iconElement2 = document.getElementById('s2');
          // 获取 <i> 标签的 class 属性值
          let iconClass2 = iconElement2.className;
          // 将 text-grey-500 替换为 text-primary 和 alert-primary
          iconClass2 = iconClass2.replace(/\bbg-greylight\b/g, 'alert-primary');
          iconClass2 = iconClass2.replace(/\btext-grey-500\b/g, 'text-primary');
          // 更新 <i> 标签的 class 属性值
          iconElement2.className = iconClass2;
          console.log('路由路径为: /Storie');
          break;
        case '/Svideo':

           // 获取包含 id="s1" 的 <i> 标签的元素
            const sid = document.getElementById('s1');
          // 获取 <i> 标签的 class 属性值
          let sidClass = sid.className;
          // 将 alert-primary 替换为 text-grey-500
          sidClass = sidClass.replace(/\balert-primary\b/g, 'bg-greylight');
          // 将 text-current 替换为 text-grey-500
          sidClass = sidClass.replace(/\btext-current\b/g, 'text-grey-500');
          // 更新 <i> 标签的 class 属性值
          sid.className = sidClass;

          // 将 id="s2" 的 <i> 标签的样式还原为初始状态
          if (iconElement2) {
            iconElement2.className = 'feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 ';
          }
          // 获取包含 id="s3" 的 <i> 标签的元素
          const iconElement3 = document.getElementById('s3');
          // 获取 <i> 标签的 class 属性值
          let iconClass3 = iconElement3.className;
          // 将 text-grey-500 替换为 text-primary 和 alert-primary
          iconClass3 = iconClass3.replace(/\bbg-greylight\b/g, 'alert-primary');
          iconClass3 = iconClass3.replace(/\btext-grey-500\b/g, 'text-primary');
          // 更新 <i> 标签的 class 属性值
          iconElement3.className = iconClass3;
          console.log('路由路径为: /Svideo');
          break;
        case '/Sgroup':
          // 获取包含 id="s1" 的 <i> 标签的元素
            const sgid = document.getElementById('s1');

          // 获取 <i> 标签的 class 属性值
          let sgidClass = sgid.className;

          // 将 alert-primary 替换为 text-grey-500
          sgidClass = sgidClass.replace(/\balert-primary\b/g, 'bg-greylight');

          // 将 text-current 替换为 text-grey-500
          sgidClass = sgidClass.replace(/\btext-current\b/g, 'text-grey-500');

          // 更新 <i> 标签的 class 属性值
          sgid.className = sgidClass;

          // 将 id="s2" 的 <i> 标签的样式还原为初始状态
          if (iconElement2) {
            iconElement2.className = 'feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 ';
          }

           // 将 id="s3" 的 <i> 标签的样式还原为初始状态
            if (iconElement3) {
            iconElement3.className = 'feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 ';
          }

          // 获取包含 id="s4" 的 <i> 标签的元素
            const iconElement4 = document.getElementById('s4');

          // 获取 <i> 标签的 class 属性值
          let iconClass4 = iconElement4.className;

          // 将 text-grey-500 替换为 text-primary 和 alert-primary
          iconClass4 = iconClass4.replace(/\bbg-greylight\b/g, 'alert-primary');
          iconClass4 = iconClass4.replace(/\btext-grey-500\b/g, 'text-primary');

          // 更新 <i> 标签的 class 属性值
          iconElement4.className = iconClass4;

          console.log('路由路径为: /Sgroup');
          break;
        case '/Shopping':
          // 获取包含 id="s1" 的 <i> 标签的元素
            const shid = document.getElementById('s1');

          // 获取 <i> 标签的 class 属性值
          let shidClass = shid.className;

          // 将 alert-primary 替换为 text-grey-500
          shidClass = shidClass.replace(/\balert-primary\b/g, 'bg-greylight');

          // 将 text-current 替换为 text-grey-500
          shidClass = shidClass.replace(/\btext-current\b/g, 'text-grey-500');

          // 更新 <i> 标签的 class 属性值
          shid.className = shidClass;

          // 将 id="s2" 的 <i> 标签的样式还原为初始状态
          if (iconElement2) {
            iconElement2.className = 'feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 ';
          }

           // 将 id="s3" 的 <i> 标签的样式还原为初始状态
            if (iconElement3) {
            iconElement3.className = 'feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 ';
          }

          // 将 id="s4" 的 <i> 标签的样式还原为初始状态
            if (iconElement4) {
            iconElement4.className = 'feather-zap font-lg bg-greylight btn-round-lg theme-dark-bg text-grey-500 ';
          }

          // 获取包含 id="s5" 的 <i> 标签的元素
            const iconElement5 = document.getElementById('s5');

          // 获取 <i> 标签的 class 属性值
          let iconClass5 = iconElement5.className;

          // 将 text-grey-500 替换为 text-primary 和 alert-primary
          iconClass5 = iconClass5.replace(/\bbg-greylight\b/g, 'alert-primary');
          iconClass5 = iconClass5.replace(/\btext-grey-500\b/g, 'text-primary');

          // 更新 <i> 标签的 class 属性值
          iconElement5.className = iconClass5;
          console.log('路由路径为: /Shopping');
          break;
        default:
          console.log('未知路由');
      }

    // if(TopPath==='/'){
    //   alert("你点击了首页");
    // }
    // if(TopPath==='/Storie'){
    //   alert("你点击了故事");
    // }
    // if(TopPath==='/Svideo'){
    //   alert("你点击了直播");
    // }
    // if(TopPath==='/Sgroup'){
    //   alert("你点击了分组");
    // }
    // if(TopPath==='/Shopping'){
    //   alert("你点击了购物");
    // }
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab;
    },

    toggleMenu(){

    },
    open1() {
        const h = this.$createElement;

        this.$notify({
          //duration: 0, //是否自动关闭
          offset: 70,
          //position: 'absolute', // 设置position为absolute
          //right: '2000px', // 设置右边距为200px
          customClass: 'notification-with-margin', // 添加自定义样式类
          title: '消息通知',
          message: h('i', { style: 'color: #303133'}, '我是一条淡水鱼，我生活在小河里，可以无忧的过完一生，但是我觉得很无聊，我想去海里，也许海水并不适合我生存，可与其在河水里重复同样的生活，把一生过得和一天一样，我宁愿在海里咸死。')

        });
      }
  },

    head() {
    // 引入js,css
    return {
      link: [
        { rel: 'stylesheet', href: '/css/themify-icons.css' },
        { rel: 'stylesheet', href: '/css/feather.css' },
        { rel: 'stylesheet', href: '/css/style.css' },
        { rel: 'stylesheet', href: '/css/emoji.css' },
        { rel: 'stylesheet', href: '/css/lightbox.css' }
      ],
    script: [
      //{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js'},
      {src: '/js/jquery.min.js' },
      { src: '/js/plugin.js' },
      { src: '/js/lightbox.js' },
      { src: '/js/scripts.js' },
      { src: '/js/test.js' }

    ]
    }
  },

}
  </script>
<style>
.active-tab {
 /* background-color: #409eff; *//* 修改选中项背景色 */
  border-radius: 50px;
  color: #fff; /* 修改选中项文字颜色 */
}
/*搜索框*/
.search-icon-btn {
  margin-left: 10px;
}

.el-notification.right {
    right: 200px !important;
}
.notification-with-margin .el-notification {
  margin-right: 200px;
}
.text-current {
  color: var(--theme-color) !important;
}
/*默认颜色*/
.text-grey-500 {
  color: #adb5bd !important;
}

	/*图标选择中的颜色*/
	.text-primary{
	color: #1E74FD !important;
	}

	/*点击选中后的单个图标背景颜色*/
	/* .alert-primary {
  color: #124698;
  background-color: #adb5bd !important;
  border-color: #adb5bd !important;
}*/

</style>
